window.onload=function(){
    getIt();
}

/*this is controller*/

function sel(control,actor){
    for(var i=0;i<control.length;i++){
        control[i].idx=i
        control[i].onclick=function(){
            for(var j=0;j<actor.length;j++){
                control[j].className='';
                actor[j].style.display="none";
            }
            this.className='active';
            actor[this.idx].style.display="block";
        }
    }
}

function getIt(){
    var a=document.getElementById('kecheng11').querySelectorAll('div');
    var b=document.querySelectorAll('.olo');
    sel(a,b);
    var c = document.getElementById('kecheng22').querySelectorAll('div');
    var d = document.querySelectorAll('.ofo');
    sel(c,d);
}

